<template>
  <div class="dashboard-container">
    <div class="app-container">

      <el-card class="box-card">
        <el-button class="buttonBox" type="primary" @click.native="dialogVisible =true">添加角色</el-button>
        <el-table
          :data="tableData"
          style="width: 100%"
          height="600"
          border
        >
          <el-table-column type="expand">
            <template slot-scope="scope">
              <el-row
                v-for="item in scope.row.children"
                :key="item.id"
              >
                <!-- 左边的 -->
                <el-col :span="6">
                  <el-tag
                    type=""
                    closable
                    effect="dark"
                    @close="handleCloseA(scope.row, item.id)"
                  >
                    {{ item.authName }}
                  </el-tag>
                </el-col>
                <!-- 右边的 -->
                <el-col :span="18">
                  <el-row v-for="item1 in item.children" :key="item1.id">
                    <el-col :span="6">
                      <el-tag
                        type="success"
                        closable
                        effect="dark"
                        @close="handleCloseA(scope.row,item1.id)"
                      >
                        {{ item1.authName }}
                      </el-tag>
                    </el-col>
                    <el-col :span="18">
                      <el-tag
                        v-for="item2 in item1.children"
                        :key="item2.id"
                        type="warning"
                        closable
                        effect="dark"
                        @close="handleCloseA(scope.row,item2.id)"
                      >
                        {{ item2.authName }}
                      </el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column
            label="#"
            type="index"
            width="50"
          />
          <el-table-column
            label="商品名称"
            prop="roleName"
          />
          <el-table-column
            label="角色描述"
            prop="roleDesc"
          />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="handleEdit(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="handleDelete(scope.row.id)"
              >
                删除
              </el-button>
              <el-button
                type="warning"
                icon="el-icon-setting"
                size="mini"
                @click="handleJurisdiction(scope.row)"
              >
                分配权限
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 选框弹框 -->
      <addModifyUser
        ref="editUser"
        :visible.sync="dialogVisible"
        @add-userclick="begRoleList()"
      />
      <!-- 单选树状弹出层 -->
      <powerql
        v-if="treeProps"
        :tree-props-id="treePropsId"
        :tree-visible.sync="treeVisible"
        :tree-props="treeProps"
        :last-id="lastId"
        @addRole="begRoleList"
        @clear-radio="clearRadio"
      />
    </div>
  </div>
</template>

<script>
import { restList } from '@/utils'
import addModifyUser from './components/add-modifyUser.vue'
import powerql from './components/powerql.vue'
import { getRoleList, deleteEditUserList, getTypeListTree, deleteRolesRightId } from '@/api/jurisdiction.js'
export default {
  components: {
    addModifyUser,
    powerql
  },
  data() {
    return {
      tree: 'tree',
      // 列表数据
      tableData: [],
      // 添加与编辑弹窗
      dialogVisible: false,
      // 树桩图弹窗
      treeVisible: false,
      addUser: {},
      // 树状图数据
      treeProps: [],
      // 列的ID
      treePropsId: 0,
      // 选中的id选项
      lastId: []
    }
  },

  created() {
    this.begRoleList()
  },

  methods: {
    // 获取角色表单数据
    async begRoleList() {
      const res = await getRoleList()
      this.tableData = res
      console.log(res)
    },
    // 编辑表单
    handleEdit(row) {
      console.log(row)
      this.dialogVisible = true
      this.$refs.editUser.addEditUser(row)
    },
    // 删除角色数据
    handleDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteEditUserList(id)
        this.begRoleList()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分配权限-权限数据
    async handleJurisdiction(row) {
      console.log(row)
      this.treePropsId = row.id
      const res = await getTypeListTree(this.tree)
      this.treeProps = res
      this.treeVisible = true
      // 获取id
      const SelectedData = restList(row.children)
      // console.log(SelectedData, 110)
      const childSelection = SelectedData.filter(item => !item.children)
      // console.log(childSelection)
      childSelection.map(item => {
        this.lastId.push(item.id)
      })
    },
    // 删除权限分配
    handleCloseA(rewid, jsid) {
      console.log(rewid)
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        console.log(rewid)
        const res = await deleteRolesRightId(rewid.id, jsid)
        // eslint-disable-next-line require-atomic-updates
        rewid.children = res
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    clearRadio() {
      this.treeProps = []
      this.lastId = []
    }
  }
}
</script>

<style scoped lang='scss'>
.buttonBox {
  margin-bottom: 15px;
}
.el-tag + .el-tag {
    margin: 10px 0 10px 10px;
  }
</style>
